<!DOCTYPE html>
<html>
<link rel="stylesheet" href="/css/index.css?v=3">
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/jsmpeg.min.js"></script>
<head>
    <meta charset="UTF-8">
</head>

<body>
<div class="cam-1">
    <canvas id="myVideo" style=" width: 100%;height: 100%;"></canvas>
    <div class="cam-tools">
        <div class="control-tool">
            <div>
                <div class="c-btn run-up" data-node="1" data-type="up">上</div>
            </div>
            <div>
                <div class="c-btn run-left" data-node="1" data-type="left">左</div>
                <div class="c-btn run-right" data-node="1" data-type="right">右</div>
            </div>
            <div>
                <!-- <div class="c-btn run-down" onclick="camPtzRun(1,'down')">下</div> -->
                <div class="c-btn run-down" data-node="1" data-type="down">下</div>
            </div>
        </div>
        <!-- <div class="scale-tool">
            <div class="c-btn zoom-up" data-node="1" data-type="zoomin">+</div>
            <div class="c-btn zoom-down" data-node="1" data-type="zoomout">-</div>
        </div> -->
        <!-- <div class="save-main">
            <div class="save-cam-tag">REC</div>
        </div> -->
    </div>
</div>


</body>
<script>
    //此处为视频流socte
    createSocketPlayer("ws://localhost:1935" , document.getElementById('myVideo'))
    function createSocketPlayer(url, canvas) {
        var players = new JSMpeg.Player(url,
            {
                canvas: canvas,
                decodeFirstFrame: true,
                disableWebAssembly: false,
                throttled: false, //这里设置为false，不然不触发onSourceCompleted事件
                chunkSize: 10 * 1024 * 1024,
                disableGl: false,
                audio: false,
                autoplay: true,
                loop: false,
                onSourceCompleted: () => {
                    console.log(111)
                },
            });

    }


    //创建一个webSocket实例，执行后，客户端就会与服务端连接
    var ws = new WebSocket("ws://localhost:9988");

    $(function () {
        $(".c-btn").click(function () {
            //向服务端发送控制命令
            var type = $(this).data("type");
            ws.send(type)
        });
    })



    //当WebSocket创建成功时，触发onopen事件
    ws.onopen = function(){
        // 复杂的数据结构，在通过连接发送之前，必须进行序列化。
        const json = JSON.stringify({
            type: 'clent connected',
        });
        ws.send(json); //将消息发送到服务端
    }
    var camInfo;
    // //当客户端收到服务端发来的消息时，触发onmessage事件
    ws.onmessage = function(e){
        console.log(e.data);
        camInfo=JSON.parse(e.data);
    }

    // //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
    // ws.onclose = function(e){
    // 　　console.log("close");
    // }

    // //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
    // ws.onerror = function(e){
    // 　　console.log(error);
    // }

</script>
<style>


    #canvas {
        border: 1px solid #ccc;
        box-sizing: border-box;
        cursor: pointer;
    }
</style>


</html>